/**
 * 游戏导演
 */
(function(){
    /**
     * 游戏类
     * @param {object} options 设定游戏等级 level 和挂载对象 object
     */
    class Minesweeper {
        constructor(options) {
            // 游戏配置
            this.options = options

            // 游戏画布对象
            this.canvas = 'wait for ...'

            // 游戏核心地图
            this.map = '{type} Array'

            // 游戏等级参数
            this.level = {
                easy: {
                    row: 10,
                    col: 10,
                    bomb: 10
                },
                normal: {
                    row: 16,
                    col: 16,
                    bomb: 40
                },
                hard: {
                    row: 30,
                    col: 16,
                    bomb: 99
                },
            }
        }

        // 初始化游戏
        initGame () {
            // 1. 新建, 并初始化画布
            this.canvas = new Canvas({
                el: this.options.el,
                level: this.level[this.options.level],
                canvsConf: this._getCanvasConf(this.level[this.options.level])
            })
            this.canvas.initCanvas()
            
            // 获取游戏地图
            this.map = this._getMap(this.canvas)

            // 监听左右键点击事件
            console.log(this.canvas)
            this.canvas.canvas.addEventListener('click', (e) => {
                const event = e || window.event
                const index = this._getIndex(event.offsetX, event.offsetY)
                console.log('left:', index)
            }, false)

            this.canvas.canvas.addEventListener('contextmenu', (e) => {
                e.preventDefault()
                const event = e || window.event
                const index = this._getIndex(event.offsetX, event.offsetY)
                console.log('right:', index)
                return false
            })
        }

        // 根据游戏级别生成画布配置
        _getCanvasConf (level) {
            const cell = {
                margin: 4,
                size: 30,
            }

            const frame = {
                width: 0,
                height: 0,
                marginX: 100,
                marginY: 0,
            }

            frame.width = (cell.size + cell.margin) * level.row - cell.margin
            frame.height = (cell.size + cell.margin) * level.col - cell.margin

            return {
                cell,
                frame
            }
        }

        // 获取地图
        _getMap (canvas) {
            return canvas.map
        }

        // 设置炸弹坐标
        _setBomb () {

        }

        // 获取鼠标点击格子
        _getIndex (positionX, positionY) {
            const canvas = this.canvas
            const offset = canvas.cell.size + canvas.cell.margin
            return {
                x: Math.floor((positionX - canvas.frame.marginX - canvas.offsetX) / offset),
                y: Math.floor((positionY - canvas.frame.marginY - canvas.offsetY) / offset)
            }
        }

        // 左键: 翻开未知块
        _openCell (index) {
            
        }
    }


    /**
     * 画布类
     */
    class Canvas {
        constructor(options) {
            this.el = options.el
            this.level = options.level
            this.cell = options.canvsConf.cell
            this.frame = options.canvsConf.frame
            this.offsetX = 100
            this.offsetY = 20

            // 画布
            this.canvas = 'will be initail'

            // 地图
            this.map = []
        }

        // 初始化画布
        initCanvas () {
            // 新建画布
            this.canvas = document.createElement('canvas')
            this.canvas.width = this.frame.width + this.frame.marginX * 2 + this.offsetX * 2
            this.canvas.height = this.frame.height + this.frame.marginY * 2 + this.offsetY * 2

            const oldCanvas = document.getElementsByTagName('canvas')
            if (oldCanvas.length) {
                this.el.removeChild(oldCanvas[0])
            }

            this.el.appendChild(this.canvas)

            // 渲染游戏界面
            this.render()
        }

        // 生成框架和方格
        render () {
            const ctx = this.canvas.getContext('2d')

            ctx.fillStyle = '#333'

            // 游戏区(雷区 + 外边距)
            ctx.fillRect(this.offsetX, this.offsetY, this.frame.width + this.frame.marginX * 2, this.frame.height + this.frame.marginY * 2)

            // 雷区
            let x = 0, y = 0,
                lenX = this.level.row,
                lenY = this.level.col
            
                this.map = []
            for (y = 0; y < lenY; y++) {
                // console.log(`---------------------row: ${y}---------------------`)
                const rows = []
                for (x = 0; x < lenX; x++) {
                    ctx.fillStyle = '#f7e19c'

                    const offsetCell = this.cell.margin + this.cell.size
                    const positionX = x * offsetCell + this.frame.marginX + this.offsetX,
                          positionY = y * offsetCell + this.frame.marginY + this.offsetY
                    const cellSize = this.cell.size

                    // console.log(`col:${x} `, ' x:', x * offsetCell, 'y:', y * offsetCell)
                    ctx.fillRect(positionX, positionY, cellSize, cellSize)

                    rows.push({
                        x: positionX,
                        y: positionY,
                        size: cellSize
                    })
                }
                this.map.push(rows)
            }
        }
    }


    /**
     * 游戏
     */
    window.Minesweeper = Minesweeper
}())
